<template>
  <div class="contrastTest tapStyle secondary-page-mode">
   <div class="secondary-toolbar">
      <span>时间选择 : </span>
      <div class="layoutBox" style="width:242px">
            <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </div>&emsp;&emsp;
      <span>监测项目 : </span>
      <div class="layoutBox" style="width:190px">
            <el-select v-model="value" multiple collapse-tags placeholder="请选择">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
      </div>&emsp;&emsp;
      <el-button @click="getTableData()"><i class="iconfont icon-sousuo"></i>查询</el-button>
      <el-button type='delet'><i class="iconfont icon-daochu"></i>导出</el-button>
    </div>
    <div class="currency-mode-wrap">
      <div class="reminder-wrap">
        <span class="reminder-title">温馨提示</span>
        <div class="reminder-content">
          <div class="reminder-text">
            <p>所选时间段内共有“多点线性核查移”x次，共有合格项m次，不合格项y次。影响数据n条。点位1、点位2的上次周核查时间距今已有7天；站点3的上次周核查距今已有6天。</p>
            <div><el-button type="noticonsecondBtn"> 生成任务 </el-button></div>
          </div>
        </div>
        <div class="reminder-toolbar">
          <div class="state-legend">
            <span><i class="qualified-icon"></i> 合格</span>
            <span><i class="unqualified-icon"></i> 不合格</span>
          </div>
          <div class="state-radio-wrap">
           <!-- <el-radio-group v-model="stateRadio" size="small" @change = "toggleTab">
              <el-radio-button label="1">当前断面</el-radio-button>
              <el-radio-button label="2">所有断面</el-radio-button>
            </el-radio-group>-->
          </div>
        </div>
      </div>
      <div class="currency-body-toggle">
        <div v-show="stateRadio === '1'" style="height: 100%">
          <div class="tablebox" style="height: calc(100% - 34px);">
            <el-table
            :data="tableData"
            border
            height="100%">
            <el-table-column
              prop="enclosure"
              fixed
              label="附件">
            </el-table-column>
            <el-table-column
              prop="operation"
              fixed
              label="操作类型">
            </el-table-column>
            <el-table-column
              fixed
              width="180"
              label="采样时间">
               <template slot-scope="scope">
                  <span>{{ setTableDate(scope.row) }}</span>
                </template>
            </el-table-column>
            <el-table-column
              prop="sampling"
              fixed
              width="180"
              label="水质等级">
                  <el-table-column label="人工" prop="szArtificial">

                  </el-table-column>
                  <el-table-column  label="自动" prop="szAuto">
                    
                  </el-table-column>
            </el-table-column>
            <el-table-column
              v-for="(item,index) in tableHead"
              :key="index"
              :label="item.indexName">
              <el-table-column
                label="人工">
                  <template slot-scope="scope">
                    {{ scope.row[item.indexCode].artificialValue }}
                  </template>
              </el-table-column>
               <el-table-column
               
                label="自动">
                 <template slot-scope="scope">
                    {{ scope.row[item.indexCode].automaticValue }}
                  </template>
              </el-table-column>
               <el-table-column
               
                label="误差率">
                 <template slot-scope="scope">
                    {{ scope.row[item.indexCode].errorRate }}
                  </template>
              </el-table-column>
            </el-table-column>
            <el-table-column
              prop="describe"
              label="描述">
            </el-table-column>
          </el-table>
          </div>
          <div class="paginationBox">
            <el-pagination
              @size-change="paginationSizeChange"
              @current-change="paginationChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              background
              :small = "true"
              popper-class = "select-common-option"
              :page-sizes = "pageList"
              layout="total,sizes,slot,->,prev, pager, next, jumper"
              :total="totalRecords">
              <span class="el-pagination__current">当前第{{currentPage}}/{{totalPage}}页</span>
            </el-pagination>
          </div>
        </div>
        <!--<div class="chart-wrap" v-show="stateRadio === '2'" style="height: 100%;">
          <div class="tablebox" style="height: calc(100% - 34px);">
            <el-table
              :yfdata="tableData2"
              border
              height="100%"
              style="width: 100%">
              <el-table-column
                type="index"
                fixed
                label="序号">
              </el-table-column>
              <el-table-column
                prop="provinces"
                fixed
                label="所属省份">
              </el-table-column>
              <el-table-column
                prop="river"
                fixed
                label="所属河流">
              </el-table-column>
              <el-table-column
                prop="nameSection"
                fixed
                label="断面名称">
              </el-table-column>
              <el-table-column
                prop="mn"
                fixed
                width="140"
                label="MN号">
              </el-table-column>
              <el-table-column
                prop="sampling"
                fixed
                width="200"
                label="采样时间">
              </el-table-column>
              <el-table-column
                v-for="(item,index) in tableHead"
                :key="index"
                :label="item.label">
                <el-table-column
                  v-for="(n,m) in item.list"
                  :key="m+'s'"
                  :prop="n.prop"
                  :label="n.label">
                </el-table-column>
              </el-table-column>
              <el-table-column
                prop="describe"
                label="描述">
              </el-table-column>
            </el-table>
          </div>
          <div class="paginationBox">
            <el-pagination
              @size-change="paginationSizeChange"
              @current-change="paginationChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              background
              :small = "true"
              popper-class = "select-common-option"
              :page-sizes = "pageList"
              layout="total,sizes,slot,->,prev, pager, next, jumper"
              :total="totalRecords">
              <span class="el-pagination__current">当前第{{currentPage}}/{{totalPage}}页</span>
            </el-pagination>
          </div>
        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "contrastTest",
  data() {
    return {
      dateRange: "",
      stateRadio: "1",
      value: ["w01001", "w21023","w01009","w01014","w01003"],
      optionData: [
       
        {
          value: "w01001",
          label: "pH"
        },
        {
          value: "w21023",
          label: "水温"
        },
        {
          value: "w01009",
          label: "溶解氧"
        },
        {
          value: "w01014",
          label: "电导率"
        },
        {
          value: "w01003",
          label: "浊度"
        }
      ],
      currentPage: 1, //分页组件当前页
      pageSize: 10, //分页每页多少条数据
      totalRecords: 1000, //总条数
      pageList: [10, 15, 20], //设置每页多少条
      tableHead: [],
      tableData: [
        {
          enclosure: "上传及查看",
          operation: "已提交",
          sampling: "2019-02-11 08:00:00",
          szArtificial: "Ⅲ",
          szAuto: "Ⅱ",
          swArtificial: "12",
          swAuto: "96",
          swErrorRate: "-20%",
          phArtificial: "7.2",
          phAuto: "6.5",
          phErrorRate: "-9.7%",
          rjyArtificial: "9.6",
          rjyAuto: "10.6",
          rjyErrorRate: "10.4%",
          ddlArtificial: "164",
          ddlAuto: "186.4",
          ddlErrorRate: "13.8%",
          describe: "-"
        }
      ],
      tableData2: []
    };
  },
  computed: {
    totalPage() {
      //计算总页数
      let number = 0;
      number = Math.ceil(this.totalRecords / this.pageSize);
      return number === 0 ? 1 : number;
    },
    stationInfo: {
      get: function() {
        return this.$store.state.stationInfo;
      }
    }
  },
  methods: {
    paginationSizeChange() {},
    paginationChange() {},
    toggleTab(val) {
      // console.log(val);
    },
    getTableData(){
         this.$http.get("/Quality/testData/automaticAndManualComparisonData", {
          params: {
            startTime: this.dateRange[0],
            endTime: this.dateRange[1],
            indexCodes: this.value.join(","),
            stationCodes: this.stationId, //this.stationId
            ifCurrentSection: true,
            pageNumber: this.currentPage,
            pageSize: this.pageSize
          }
        }).then(res=>{
            if(res.data.code === 0){
               this.tableHead =res.data.content.dataList.length > 0? res.data.content.dataList[0]: [];
                this.tableData = res.data.content.dataList;
            }
        })
    },
    // getAllTableData(){
    //   this.$http.get("/Quality/testData/automaticAndManualComparisonData", {
    //       params: {
    //         startTime: this.dateRange[0],
    //         endTime: this.dateRange[1],
    //         indexCodes: this.value.join(","),
    //         stationCodes: this.stationId, //this.stationId
    //         ifCurrentSection: false,
    //         pageNumber: this.currentPage,
    //         pageSize: this.pageSize
    //       }
    //     }).then(res=>{
    //       if(res.data.code === 0){
    //         this.tableHead = res.data.content.dataList.length > 0? res.data.content.dataList[0]: [];
    //         this.tableData = res.data.content.dataList;
    //       }
    //     })
    // },
    setTableDate(data) {
      //设置时间
      for (let i in data) {
        return data[i].time;
      }
    }
  },
  mounted() {
    // this.createdChart();
  },
  created() {
      //初始化时间
      let startTime = new Date().setDate(new Date().getDate() - 2);
      let endTime = new Date();
      this.dateRange = [new Date(startTime).format('yyyy-MM-dd'),endTime.format('yyyy-MM-dd')];
  },
  watch: {
    stationInfo(value) {
      if (value.length > 0) {
        this.stationId = value[0].nodeId;
        this.getTableData()
      }
    }
  }
};
</script>

<style scoped lang="less">
</style>
